<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>LayIM 登陆</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/css/login/style3.css">
    <link rel="stylesheet" type="text/css" href="/static/css/login/animate-custom.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>聊天室登录</span></h1>
    </header>
    <section>
        <div id="container_demo">
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form action="" autocomplete="on" method="post" class="layui-form" lay-filter="login">
                        <h1>登陆</h1>
                        <p>
                            <label for="uname" class="uname" data-icon="u"> 用户名 </label>
                            <input id="uname" name="uname" required="required" type="text" placeholder="请输入密码">
                        </p>
                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="password" name="password" required="required" type="password"
                                   placeholder="请输入密码">
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping">
                            <label for="loginkeeping">记住我</label>
                        </p>
                        <p class="login button">
                            <input type="submit" value="登陆">
                        </p>
                        <p class="change_link">
                            还没有账号 ?
                            <a href="" class="to_register">加入我们</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
    layui.use(['layer', 'form', 'jquery'], function () {
        //layui组件
        var layer = layui.layer, form = layui.form(), $ = layui.jquery;

        //登陆
        form.on('submit(login)', function (data) {
            var d = {'name': $("#uname").val(), 'password': $("#password").val()};
            //loading层
            var index = layer.load(1, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            $.ajax({
                url: "/user/login",
                type: "POST",
                data: d,
                success: function (data) {
                    layer.close(index);
                    data = JSON.parse(data);
                    if (data.code < 0) {
                        layer.msg(data.msg);
                        $("#password").val("");
                    } else if (data.code === 1) {
                        window.location.href = "/static/index.html";
                    }
                },
                error: function (data) {
                    layer.msg("服务器错误,请稍后再试！");
                }
            });
            return false;
        });
    });
</script>
</body>
</html>